react的漫漫之路

学习React不是一蹴而就的事情，入门似乎也没那么简单。但我觉得这一切都是值得的。
这是我在学习React中的一些心得，希望能够帮助到大家！

React可以使用两种样式，一种是普通的css，一种是在React中定义的样式。
普通的css样式，通过className=""来引用

<style>
    .style_2{
        background-color: #6699ff;
        font-size: 24px;
        padding: 3px 5px 3px 5px;
        color: #FFFFFF;
    }
    .Separate{
        height: 10px;
    }
</style>
<span className="style_2">账号:</span>
React中定义的样式，通过style={}来引用
//React的css样式
    var style_1={
        color:'#9900ff',
        padding:3,
    }

组件

构建组件（名字随意起，首字母要大写），我这里构建了一个叫Board的组件，然后通过getInitialState进行初始化。通过ReactDOM.render加载到html页面中。如果ReactDOM.render中有多个组件或者标签，则需要用一个div标签来包裹。

var Board = React.createClass({
        //初始数据
        getInitialState: function(){
            return ({
                comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
            });
         
       },
//初始化
        eachComment: function(text,i){
            return (
                <Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
                    <br className="Separate"></br>
                    <span className="style_2">账号:</span>
                    <span className="style_2">{text.account}</span>
                    <br></br>
                    <span className="style_2">用户名:</span>
                    <span className="style_2">{text.name}</span>
                </Comment>
            );
        },
ReactDOM.render(
        //需要用一个div标签来包裹
        <div>
            <h1 style={style_1}>落叶丶Fly的React小站</h1>
            <Board />
        </div>,
        document.getElementById('container')
    );
props和state

state：React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

props：state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

函数

React中的button点击事件和普通的JavaScript差不多，但是要注意onClick中的C要大写，否则会报错。本文通过按钮点击来更改editing的布尔值，用setState函数进行更新，从而在普通模式与编辑模式中切换。

<button onClick={this.edit}>编辑</button>
        //编辑
        edit: function(){
            this.setState({editing: true});
        },
        //保存
        save: function(){
            var val = this.refs.new_account.value;
            var val1 = this.refs.new_name.value;
            console.log("拿到的值是: " + val+val1);
            this.props.updateCommentText(val,val1,this.props.index)
            this.setState({editing: false});
        },
        //普通模式
        renderNormal:function(){
            return (
                <div>
                    <div>{this.props.children}</div>
                    <button onClick={this.edit}>编辑</button>
                    <button onClick={this.remove}>移除</button>
                </div>
            );
        },
        //编辑模式
        renderForm:function(){
            let children = this.props.children
            return (
                <div>
                    <input ref="new_account" type="text" defaultValue = {children[2].props.children} />
                    <div></div>
                    <input ref="new_name" type="text" defaultValue = {children[5].props.children} />
                    <div></div>
                    <button onClick={this.save}>保存</button>
                </div>
            )
        },
        //模式更改
        render: function (){
            //console.log(this.props)
            if(this.state.editing){
                return this.renderForm();
            }else{
                return this.renderNormal();
            }
        }
全部代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>React-Template</title>
  <script type="text/javascript" src="js/react.min.js" ></script>
  <script type="text/javascript" src="js/react-dom.min.js" ></script>
  <script type="text/javascript" src="js/babel.min.js" ></script>
</head>
<!--普通css样式-->
<style>
    .style_2{
        background-color: #6699ff;
        font-size: 24px;
        padding: 3px 5px 3px 5px;
        color: #FFFFFF;
    }
    .Separate{
        height: 10px;
    }
</style>
<body>
    <!-- 容器 -->
    <div id="container"></div>
<script type="text/babel">
    //React的css样式
    var style_1={
        color:'#9900ff',
        padding:3,
    }
    
    var Board = React.createClass({
        //初始数据
        getInitialState: function(){
            return ({
                comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
            });
        },
        //修改并更新数据
        updateComment: function(new_account,new_name,i){
            console.log(new_account+":"+new_name);
            var arr = this.state.comments;
            arr[i].account = new_account;
            arr[i].name = new_name;
            this.setState({comments: arr});
        },
        //删除数据
        removeComment: function(i){
            var arr = this.state.comments;
            arr.splice(i,1);
            this.setState({comments: arr});
        },
        //初始化
        eachComment: function(text,i){
            return (
                <Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
                    <br className="Separate"></br>
                    <span className="style_2">账号:</span>
                    <span className="style_2">{text.account}</span>
                    <br></br>
                    <span className="style_2">用户名:</span>
                    <span className="style_2">{text.name}</span>
                </Comment>
            );
        },
        //新增用户
        add: function(text){
            var arr = this.state.comments;
            arr.push(text);
            console.log('arr', this.state.comments)
            this.setState({comments: arr});
        },
        render: function(){
            return (
                <div>
                    <button onClick={this.add.bind(null,{account:"account",name:"name"})}>新增用户</button>
                    <div>
                    {
                        this.state.comments.map(this.eachComment)
                    }
                    </div>
                </div>
            );
        }
    });
 
 
    //编辑保存移除状态
    var Comment = React.createClass({
        getInitialState: function(){
            return ({editing: false});
        },
        //编辑
        edit: function(){
            this.setState({editing: true});
        },
        //移除
        remove: function(){
            // alert("removing comment!");
            this.props.deleteFromBoard(this.props.index);
        },
        //保存
        save: function(){
            var val = this.refs.new_account.value;
            var val1 = this.refs.new_name.value;
            console.log("拿到的值是: " + val+val1);
            this.props.updateCommentText(val,val1,this.props.index)
            this.setState({editing: false});
        },
 
 
        //普通模式
        renderNormal:function(){
            return (
                <div>
                    <div>{this.props.children}</div>
                    <button onClick={this.edit}>编辑</button>
                    <button onClick={this.remove}>移除</button>
                </div>
            );
        },
        //编辑模式
        renderForm:function(){
            let children = this.props.children
            return (
                <div>
                    <input ref="new_account" type="text" defaultValue = {children[2].props.children} />
                    <div></div>
                    <input ref="new_name" type="text" defaultValue = {children[5].props.children} />
                    <div></div>
                    <button onClick={this.save}>保存</button>
                </div>
            )
        },
        //模式更改
        render: function (){
            //console.log(this.props)
            if(this.state.editing){
                return this.renderForm();
            }else{
                return this.renderNormal();
            }
        }
    });
    
    ReactDOM.render(
        //需要用一个div标签来包裹
        <div>
            <h1 style={style_1}>落叶丶Fly的React小站</h1>
            <Board />
        </div>,
        document.getElementById('container')
    );
</script>
</body>
</htm>

react的漫漫之路

前端爱好者

引用和评论

移动端优先的flex三栏布局的使用方法

One 一个简洁的博客、微博客系统

在Java程序中监听mysql的binlog

Mysql数据库sql优化案例

nginx在同一域名下部署多个vue项目

一个用JavaScript生成思维导图(mindmap)的github repo

NGINX 知识总结